:root {
  --mmx-theme-color: #2563EB;
}

.mmx-designs {
  height: 100%;
  width: 100%;

  .user-task {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--mmx-theme-color);
    border-radius: 10px;
    background-color: #ffffff;
    position: relative;

    .title {
      color: var(--mmx-theme-color);
    }

    svg {
      position: absolute;
      top: 5px;
      left: 5px;

      path {
        fill: var(--mmx-theme-color);
      }
    }
  }

  .start {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    border-radius: 50px;
    border: 2px solid var(--mmx-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 10px;
      color: var(--mmx-theme-color);
    }
  }

  .end {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    border-radius: 50px;
    border: 2px solid var(--mmx-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 10px;
      color: var(--mmx-theme-color);
    }

    .end-container {
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border-radius: 50px;
      border: 2px solid var(--mmx-theme-color);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .exclusive-gateway {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin-left: 13px;
    margin-top: 13px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -o-transform: rotate(45deg); /* Opera */
    border: 2px solid var(--mmx-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      -ms-transform: rotate(-45deg); /* Internet Explorer */
      -moz-transform: rotate(-45deg); /* Firefox */
      -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
      -o-transform: rotate(-45deg); /* Opera */
      path {
        fill: var(--mmx-theme-color);
      }
    }
  }

  .parallel-gateway {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin-left: 13px;
    margin-top: 13px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -o-transform: rotate(45deg); /* Opera */
    border: 2px solid var(--mmx-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      -ms-transform: rotate(-45deg); /* Internet Explorer */
      -moz-transform: rotate(-45deg); /* Firefox */
      -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
      -o-transform: rotate(-45deg); /* Opera */
      path {
        fill: var(--mmx-theme-color);
      }
    }
  }

  .inclusive-gateway {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin-left: 13px;
    margin-top: 13px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -o-transform: rotate(45deg); /* Opera */
    border: 2px solid var(--mmx-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      -ms-transform: rotate(-45deg); /* Internet Explorer */
      -moz-transform: rotate(-45deg); /* Firefox */
      -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
      -o-transform: rotate(-45deg); /* Opera */
      path {
        fill: var(--mmx-theme-color);
      }
    }
  }

}


